<template>
  <div :style="{height: tableHeight+'px'}" class="timeline-box">
    <div v-if="tableData.length">
      <el-table
          :data="tableData"
          size="mini"
          style="width: 100%">
        <el-table-column
            label="添加时间"
        prop="create_time">
        </el-table-column>
        <el-table-column
            label="合同开始时间-结束时间">
          <template slot-scope="scope">
            {{ scope.row.start_time }} 至 {{ scope.row.end_time }}
          </template>
        </el-table-column>
        <el-table-column
            prop="content"
            label="合同附件">
          <template slot-scope="scope">
            <!--            <el-button size="mini" @click="detelDetailFn(scope.row.id)" plain>预览</el-button>-->
            <div v-for="item in scope.row.file">
              <btn_file :option="item"></btn_file>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <div class="line-list" v-else>暂无记录</div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {contractIndex} from '@/api/admin/contract'

export default {
  props: ['resumeDetail', 'tableHeight', 'archives_id'],
  name: "Timeline",
  data() {
    return {
      color: '#069f71',
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      tableData: [],
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      contractIndex({archives_id: this.archives_id, p: this.page.index}).then(res => {
        console.log('合同类；', res)
        if (!res.code) {
          for (let item of res.list.data) {
            item.file = JSON.parse(item.file)
          }
          this.tableData = res.list.data;
          this.page.total = res.list.total;
        }
      })
    },
    BatchOperation() {
      this.InitFn()
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    checkDetail(option) {
      console.log('查看简历审核详情');
      // this. @click="showPreview(2)"
      this.$emit('getDetailLine', option)
    },
    detelDetailFn(id) {
      this.$confirm('确认永久删除该课表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      this.$post(this.api.archives.reward.delete, {
        id: id,
      }).then((response) => {
        this.InitFn()
      }).catch((err) => {
        console.log(err)
      })
    },
  },
}
</script>

<style scoped>
.timeline-content {
  margin-top: 10px;
}

.timeline-content-check {
  color: #1b8de5;
  text-decoration: underline;
  cursor: pointer;
}

.timeline-box {
  overflow-y: auto;
}

.line-list {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  padding: 50px;
}
</style>
